﻿@page "/DateTime"

@using FluentUI.Demo.Shared.Pages.DateTimes.Examples

<PageTitle>@App.PageTitle("Date and Time")</PageTitle>

<h1>Date & Time</h1>

<blockquote>
    @(new MarkupString(DemoNavProvider.EditFormOffIcon))
    The <b>FluentCalendar</b> and <b>FluentDatePicker</b> components are not yet fully compatible with the <code>EditForm</code> and <code>FluentEditForm</code> elements.
    Some functionalities, such as error messages, the requirement message or the validation messages are missing.
</blockquote>

<p>
    The <code>&lt;FluentCalendar&gt;</code> is an implementation of a month calendar display leveraging the Fluent UI design system.
    It allows for setting selected and/or disabled dates and can handle a click on a day event (if not <code>ReadOnly</code>)
</p>
<p>
    The <code>&lt;FluentDatePicker&gt;</code> is an input field that shows a calendar dropdown to select a date.
</p>
<p>
    The <code>&lt;FluentTimePicker&gt;</code> allows for picking a specific time of day by selecting hour, minutes and AM/PM
</p>

<blockquote>
    <b>note</b>: FluentCalendar and FluentDatePicker are not yet fully compatible with accessibility.
</blockquote>

<h2 id="example">Examples</h2>

<DemoSection Title="Default calendar" Component="@typeof(CalendarDefault)"></DemoSection>

<DemoSection Title="Customized calendar" Component="@typeof(CalendarDayCustomized)"></DemoSection>

<DemoSection Title="Selection" Component="@typeof(CalendarSelection)"></DemoSection>

<DemoSection Title="Culture" Component="@typeof(CalendarCulture)"></DemoSection>

<DemoSection Title="ReadOnly calendar with 2-digits and using French Culture" Component="@typeof(CalendarReadonly)"></DemoSection>

<DemoSection Title="Default Date Picker" Component="@typeof(DatePickerDefault)"></DemoSection>

<DemoSection Title="Default Time Picker" Component="@typeof(TimePickerDefault)"></DemoSection>

<h2 id="conversion">DateOnly, TimeOnly bindings</h2>

<p>
    By design, the <b>DatePicker</b> component uses a <b>Value</b> property of type <b>DateTime?</b>
    To facilitate binding to a <b>DateOnly</b> type, you can use the methods
    <code>ToDateTime</code> and <code>ToDateOnly</code> methods.
</p>

<p>
    If your variable is of type <code>Nullable&lt;DateTime></code>, you can continue
    to use <code>@@bind-Value</code>.
    For other types, you must use the syntax <code>value="..." ValueChanged="..."</code>.
</p>

<b>Example</b>
<CodeSnippet>
    &lt;FluentDatePicker Value="@@MyDate.ToDateTime()"
                      ValueChanged="@@(e => MyDate = e.ToDateOnly())" />
    @@code {
        private DateOnly MyDate = DateOnly.FromDateTime(DateTime.Today);
    }
</CodeSnippet>

<DemoSection Title="Conversion examples" Component="@typeof(DateTimeConversionExample)"></DemoSection>

<h2 id="totimeago">ToTimeAgo() method</h2>

An extension method <b>ToTimeAgo(TimeSpan delay)</b> returns a string with one of these samples, depending of the delay.
<ul>
    <li>Just now</li>
    <li>25 seconds ago</li>
    <li>14 minutes ago</li>
    <li>9 hours ago</li>
    <li>1 day ago</li>
    <li>5 days ago</li>
    <li>6 months ago</li>
    <li>2 years ago</li>
</ul>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentCalendar)" />
<ApiDocumentation Component="typeof(FluentDatePicker)" />
<ApiDocumentation Component="typeof(FluentTimePicker)" />

